<template>
	
	<view  class="pages">
		<!-- <view class="top">
			<image src="../../static/tab-bar/arrow-left.png" mode=""></image>
			<text class="text" >订单详情</text>
		</view> -->
		<view class="title-box">
			<view class="title-box-top">
				<text class="top1">黑天鹅新希望...</text>
				<image src="../../static/tab-bar/my.png" mode=""></image>
				<view class="top2">
					<text >209.68km</text>
				</view>
				<text class="top3">导航</text>
				<text class="top4">已完成</text>
			</view>
			<text class="title-box-center">营业时间： 09：00-22：00</text>
			<text class="title-box-bottom">四川省成都市武侯区新希望99号</text>
		</view>
		<view class="time">
			<view class="time-left">
				<text>自提时间</text>
				<text>取件人</text>
			</view>
			<view class="time-right">
				<text>24.01.11 周四 09:00-09:30 </text>
				<text> 狗蛋 17780346521</text>
			</view>
		</view>
		<view class="itemInfo">
			<view class="itemInfo-left">
				<image src="../../static/tab-bar/cake.png" mode=""></image>
				</view>
			<view class="itemInfo-right">
				<view class="itemInfo-right-top">
					<text>繁华玉宇</text>
					<text>￥59999.00</text>
				</view>
				<view class="itemInfo-right-center">
					<text>16cm+26cm+23cm+37cm</text>
					<text>建议30-50人食用</text>
				</view>
				<view class="itemInfo-right-bottom">
					<text>口味： 果仁松露巧克力味</text>
				</view>
			</view>
		</view>
		<view class="item-center">
			<view class="item-center-left">
				<text>餐具数量</text>
				<text>生日蜡烛</text>
				<text>祝福语牌</text>
				<text>生日贺卡</text>
			</view>
			<view class="item-center-right">
				<text>20</text>
				<text>数字蜡烛 1和8</text>
				<text>生日快乐</text>
				<text>无</text>
			</view>
		</view>	
		<view class="otherInfo">
			<text>其他信息</text>
		</view>
		<view class="note">
			
			<text class="note-left">备注</text>
			<text class="note-right">无</text>
		</view>
		<view class="receipt">
			<text class="receipt-left">发票信息</text>
			<text class="receipt-right">无</text>
		</view>	
		<view class="code">
			<view class="code-left">
				<view class="code-left1">
					<text>订单编号:</text>
				</view>
				<view class="code-left2">
					<text>下单时间:</text>
				</view>
			</view>
			<view class="code-right">
				<view class="code-right1">
					<text class="text1">复制</text>
					<text>E2024010610223860</text>
				</view>
				<view class="code-right2">
					<text>2024/01/06 12：00：00</text>
				</view>
			</view>
		</view>
		<uni-section>
			<view class="deleteDialog">
				<!-- <uni-popup>
					<text>提示</text>
					<text>确认取消吗？</text>
					<button @click="no">取消</button>
					<button @click="yes">确定</button>
				</uni-popup> -->
				<!-- 删除订单 -->
				<view class="delete" @click="open">
					<text>删除订单</text>
				</view>
				<uni-popup ref="popup" >
					<view class="pop">
						<view class="popup-top">
							<text>提示</text>
						</view>
						<view class="popup-center">
							<text @click="clear">确认删除吗？</text>
						</view>
						<view class="popup-bottom">
							<text class="popup-bottom1" @click="no">取消</text>
							<text class="popup-bottom2" @click="yes">确认</text>
						</view>
					</view>
				</uni-popup>
				<!-- fdhrtdgfsefs -->
			</view>
			
			
		</uni-section>
		<view class="bottom">
			<text class="bottom-left">￥59999.00</text>
			<text class="bottom-right" @click="link">联系门店</text>
		</view>
	</view>
</template>

<script>
import { methods } from "../../uni_modules/uview-ui/libs/mixin/mixin"
	
	
	export default {
	  data() {
			
	    return {
			 
	      
	    };
		  
	  },
		methods:{
			
			open() {
				this.$refs.popup.open('center')
				
				},
			no() {
			this.$refs.popup.close()
			},
			yes(){
				// 清除所有数据
			},
			link(){
				uni.showActionSheet({
					itemList: ['028-86500333', '呼叫'],
				});
			},
			clear(){
				
			}
				
			}	//通过id去删除
				// 在云函数
				// 本地storage
			
		
	}
</script>

<style lang="scss">
	.pages{
		padding: 15px;
	}
	/* ！！！！删除信息弹出框！！！！ */
	.pop{
		width: 600rpx;
		height: 200rpx;
		background-color: white;
		padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.popup-top{
			align-items: center;
			text-align: center;
			font-weight: 500;
			// background-color: lavender;
		}
		.popup-center{
			align-items: center;
			text-align: center;
			font-weight: 100;
			font-size: 14px;
			// background-color: salmon;
			
		}
		.popup-bottom{
			// width: 100%;
			height: 20px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 10px;
			// background-color: wheat;
			.popup-bottom1{
				// padding: 1px 2px;
				width: 100px;
				height: 28px;
				border: 1px solid black;
				align-items: center;
				text-align: center;
			}
			.popup-bottom2{
				width: 100px;
				height: 30px;
				background-color: #000;
				align-items: center;
				text-align: center;
				color: white;
			}
		    }
		
		
	}

	
	.top{
		
		margin-top: 18px;
		
		display: flex;
	}
	.top image{
		width: 20px;
		height: 20px;
		/* color: #000; */
	}
	.top .text{
		text-align: center;
		margin-left: 120px;
		font-weight: 600;
	}
	.title-box{
		/* border: 1px solid darkred; */
		/* margin-top: 20px; */
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 80px;
		
	}
	
	.title-box .title-box-top{
		
		display: flex;
		width: 100%;
		 /* background-color: aliceblue; */
	}
	.title-box .title-box-top .top1{
		 /* 黑天鹅新希望 */
		 width: 150px;
		 /* background-color: aqua; */
	
	}
	.title-box .title-box-top image{
		width: 10px;
		height: 10px;
		margin-left: 10px;
	}
	.title-box .title-box-top .top2 text{
		font-size: 12px;
		font-weight: 100;
		/* background-color: aquamarine; */
		
	}
	.title-box .title-box-top .top3{
		border: 1px solid black;
		width: 68px;
		height: 20px;
		font-size: 12px;
		display: flex;
		text-align: center;
		justify-content: center;
		line-height: 20px;
		margin-left: 10px;
	}
	.title-box .title-box-top .top4{
		background-color: #000;
		color: white;
		width: 70px;
		height: 22px;
		font-size: 12px;
		display: flex;
		text-align: center;
		justify-content: center;
		line-height: 20px;
		margin-left: 10px;
	}
	 .title-box-center {
		display: block;
		margin-top: 5px;
		font-weight: 100;
		font-size: 13px;
	}
	.title-box-bottom{
		display: block;
		margin-top: 5px;
		font-weight: 100;
		font-size: 13px;
	}
	.time{
		
		display: flex;
		width: 100%;
		height: 80px;
		background-color: gainsboro;
		/* 盒子里面的内边距 */
		box-sizing: border-box;
		padding: 10px;
	}
	.time .time-left{
		width: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* flex-direction: column; */
		/* background-color: aliceblue; */
		font-size: 15px;
		font-weight: 100;
	}
	.time .time-right{
		width: 210px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* flex-direction: column; */
		font-size: 15px;
		font-weight: 100;
		
	}
	.itemInfo{
		 /* border: 1px solid gold; */
		 margin-top: 15px;
		 display: flex;
	}
	.itemInfo image{
		width: 80px;
		height: 80px;
	}
	.itemInfo-right{
		margin-left: 10px;
		width: 100%;
		/* border: 1px solid saddlebrown;	 */
	}
	.itemInfo-right-top{
	/* border: 1px solid gainsboro;	 */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 100;
	}
	.itemInfo-right-center{
		font-size: 10px;
		font-weight: 100;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 5px;
	}
	.itemInfo-right-bottom{
		margin-top: 5px;
		font-size: 10px;
		font-weight: 100;
	}
	.item-center{

		display: flex;
		width: 100%;
		height: 120px;
		background-color: gainsboro;
		/* 盒子里面的内边距 */
		box-sizing: border-box;
		padding: 10px;
	}
	.item-center-left{
		display: flex;
		flex-direction: column;
        justify-content: space-between;
		font-size: 15px;
		font-weight: 100;
	}
	.item-center-right{
		margin-left: 25px;
		display: flex;
		flex-direction: column;
	    justify-content: space-between;
		font-size: 15px;
		font-weight: 100;
	}
	.otherInfo{
		width: 100%;
		height: 40px;
		font-size: 16px;
		font-weight: 300;
		padding: 9px;
		box-sizing:border-box;
		text-align: center;
		/* background-color: antiquewhite; */
	}
	.note{
		background-color: gainsboro;
		width: 100%;
		height: 40px;
		font-size: 16px;
		font-weight: 300;
		padding:10px;
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
	}
	
	 .note-left{
		width: 80px;
		display: block;
	
	}
	.receipt{
		margin-top: 10px;
		background-color: gainsboro;
		width: 100%;
		height: 40px;
		font-size: 16px;
		font-weight: 300;
		padding:10px;
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
	}
	.receipt-left{
		width: 80px;
		display: block;
	}
	.code{
		/* background-color: aliceblue; */
		width: 100%;
		height: 60px;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		margin-top: 10px;
		justify-content: space-between;
		/* border: 1px solid navajowhite; */
	}
	.code-left {
		/* display: block; */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100px;
		height: 40px;
		font-size: 10px;
		font-weight: 100;
		/* border: 1px solid darkblue; */
	}
	.code-right {
		/* display: block; */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 200px;
		height: 40px;
		font-size: 10px;
		font-weight: 100;
		/* border: 1px solid black; */
	}
	.code-right1{
		display: flex;
		flex-direction: row;
		margin-left: 80px;
	}
	.code-right1 .text1{
		/* background-color: aquamarine; */
		display: block;
		width: 20px;
		border: 1px solid black;
		font-size: 8px;
		text-align: center;
		/* padding: 0 4px; */
	}
	.code-right2{
		display: flex;
		flex-direction: row;
		margin-left: 87px;
		
	}
	
	/* 删除订单   外面再套个盒子padding*/
	.delete{
		/* background-color: antiquewhite; */
		text-align: center;
		align-items: center;
		border: 1px solid black;
		width: 80px;
		font-size: 13px;
		font-weight: 100;
		margin-left: 160px;
	}
	.bottom{
		width: 100%;
		height: 25px;
		/* background-color: antiquewhite; */
		display: flex;
        justify-content: space-between;
		margin-top: 20px;
	}
	.bottom-right{
		width: 50px;
		height: 25px;
		display: block;
		padding: 0 20px;
		color: white;
		font-weight: 100;
		font-size: 12px;
		text-align: center;
		line-height: 25px;
		background-color: #000;
		/* padding: 0 40px; */
	}
	
</style>